<template>
  <div class="float-buttons">
    <!-- 建议反馈按钮 -->
    <a-tooltip placement="left" :mouseEnterDelay="0.2" overlayClassName="qrcode-tooltip">
      <template #title>
        <div class="qrcode-container">
          <a
            href="https://doc.weixin.qq.com/scenario/login.html?form_login=1&success_jump_url=https%3A%2F%2Fdoc.weixin.qq.com%2Fforms%2FAJAANAe5AA4AV8AVQa2ALcCN8MOwTk3jf_draft%3Ffrom%3Dweixin%23%2F"
            target="_blank"
            class="feedback-link"
          >
            点击此处进入反馈表单
          </a>
          <div class="qrcode-text">使用微信或企业微信登录</div>
        </div>
      </template>
      <div class="float-button feedback-button">
        <QuestionCircleOutlined />
      </div>
    </a-tooltip>

    <!-- 回到顶部按钮 -->
    <div v-show="showBackTop" class="float-button backtop-button" @click="scrollToTop">
      <VerticalAlignTopOutlined />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { VerticalAlignTopOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue'

const showBackTop = ref(false)
const scrollThreshold = 400

const checkScroll = () => {
  showBackTop.value = window.pageYOffset > scrollThreshold
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

onMounted(() => {
  window.addEventListener('scroll', checkScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', checkScroll)
})
</script>

<style scoped>
.float-buttons {
  position: fixed;
  right: 5px;
  bottom: 140px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.float-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #666;
  font-size: 18px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s;
}

.float-button:hover {
  color: #333;
  background-color: #f5f5f5;
}

:deep(.qrcode-tooltip) {
  max-width: none !important;
}

.qrcode-container {
  padding: 16px;
  text-align: center;
}

.feedback-link {
  display: block;
  padding: 12px 20px;
  background-color: #1890ff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 8px;
  transition: background-color 0.3s;
}

.feedback-link:hover {
  background-color: #40a9ff;
}

.qrcode-text {
  font-size: 14px;
  color: #666;
}
</style>
